<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>多元弱酸物种分布系数图</title>
  <!-- 引入 Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    label { margin-right: 10px; }
    .input-group { margin-bottom: 10px; }
  </style>
</head>
<body>
  <h1>多元弱酸物种分布系数图</h1>
  
  <div class="input-group">
    <label for="acidType">选择酸类型：</label>
    <select id="acidType">
      <option value="diprotic">二元酸</option>
      <option value="triprotic">三元酸</option>
    </select>
  </div>
  
  <div id="kaInputs">
    <div class="input-group" id="ka1Div">
      <label for="ka1">Ka1:</label>
      <input type="number" id="ka1" step="any" placeholder="例如 1e-3">
    </div>
    <div class="input-group" id="ka2Div">
      <label for="ka2">Ka2:</label>
      <input type="number" id="ka2" step="any" placeholder="例如 1e-7">
    </div>
    <div class="input-group" id="ka3Div" style="display:none;">
      <label for="ka3">Ka3:</label>
      <input type="number" id="ka3" step="any" placeholder="例如 1e-10">
    </div>
  </div>
  
  <button onclick="calculate()">计算并绘图</button>
  
  <div id="plot" style="width: 100%; height: 500px;"></div>
  
  <script>
    // 根据酸类型切换输入框显示
    document.getElementById('acidType').addEventListener('change', function() {
      var acidType = this.value;
      if (acidType === 'diprotic') {
        document.getElementById('ka3Div').style.display = 'none';
      } else if (acidType === 'triprotic') {
        document.getElementById('ka3Div').style.display = 'block';
      }
    });
    
    function calculate() {
      var acidType = document.getElementById('acidType').value;
      var ka1 = parseFloat(document.getElementById('ka1').value);
      var ka2 = parseFloat(document.getElementById('ka2').value);
      var ka3 = document.getElementById('ka3') ? parseFloat(document.getElementById('ka3').value) : 0;
      
      // 定义 pH 范围
      var pHValues = [];
      var traces = [];
      
      if (acidType === 'diprotic') {
        var alpha0 = [], alpha1 = [], alpha2 = [];
        for (var pH = 0; pH <= 14; pH += 0.1) {
          var H = Math.pow(10, -pH);
          var denom = Math.pow(H, 2) + H * ka1 + ka1 * ka2;
          alpha0.push(Math.pow(H, 2) / denom);
          alpha1.push(H * ka1 / denom);
          alpha2.push(ka1 * ka2 / denom);
          pHValues.push(pH.toFixed(1));
        }
        traces.push({
          x: pHValues,
          y: alpha0,
          mode: 'lines',
          name: 'H₂A'
        });
        traces.push({
          x: pHValues,
          y: alpha1,
          mode: 'lines',
          name: 'HA⁻'
        });
        traces.push({
          x: pHValues,
          y: alpha2,
          mode: 'lines',
          name: 'A²⁻'
        });
      } else if (acidType === 'triprotic') {
        var alpha0 = [], alpha1 = [], alpha2 = [], alpha3Arr = [];
        for (var pH = 0; pH <= 14; pH += 0.1) {
          var H = Math.pow(10, -pH);
          var denom = Math.pow(H, 3) + Math.pow(H, 2) * ka1 + H * ka1 * ka2 + ka1 * ka2 * ka3;
          alpha0.push(Math.pow(H, 3) / denom);
          alpha1.push(Math.pow(H, 2) * ka1 / denom);
          alpha2.push(H * ka1 * ka2 / denom);
          alpha3Arr.push(ka1 * ka2 * ka3 / denom);
          pHValues.push(pH.toFixed(1));
        }
        traces.push({
          x: pHValues,
          y: alpha0,
          mode: 'lines',
          name: 'H₃A'
        });
        traces.push({
          x: pHValues,
          y: alpha1,
          mode: 'lines',
          name: 'H₂A⁻'
        });
        traces.push({
          x: pHValues,
          y: alpha2,
          mode: 'lines',
          name: 'HA²⁻'
        });
        traces.push({
          x: pHValues,
          y: alpha3Arr,
          mode: 'lines',
          name: 'A³⁻'
        });
      }
      
      Plotly.newPlot('plot', traces, {
        title: '物种分布系数 - pH 曲线',
        xaxis: { title: 'pH' },
        yaxis: { title: '分布系数' }
      });
    }
  </script>
</body>
</html>
